<template>
	<view class="shopstreet">
		<uni-search-bar placeholder="易度商城" :radius="100" @confirm="search" ></uni-search-bar>
		<view class="shop" v-for="(item, key) in shop" :key="key">
			 <!-- v-if="item.shop.length > 0" -->
			<view class="shop-head">
				<view class="shop-name">
					<image :src="item.user.avatar ? item.user.avatar : 'http://thirdwx.qlogo.cn/mmopen/ywutyVN8JTp9ibAc2jCnGlgIXxG2DcTT27uiauCNYCzQ20mpyE9TamDzawcIejTZMutodNxxlMVU3yiaIicRaXq9iaequLsnRaHDY/132'" mode=""></image>

					<view class="store">
						<text>{{item.shop_name}}</text>
						<view>共{{item.shop.length}}件宝贝</view>
					</view>
				</view>
				<view class="into_store" @click="navToDetailPage(item)" >
					<uni-icons type="icon-tubiaozhizuomoban" color="#ff4400" size="18"></uni-icons>
					<text>进店</text>
				</view>
				
				<!-- <uni-icons type="icon-shoucang" class="collection" @click="toFavorite(item.id)" size="16"></uni-icons> -->
				<!-- <view @click="toFavorite(item.id)" class="collection">收藏</view> -->
			</view>
	<!-- 		<view class="score">
				<view class="">
					宝贝描述：<text>5.0</text>
				</view>
				<view class="">
					卖家服务：<text>5.0</text>
				</view>
				<view class="">
					物流服务：<text>5.0</text>
				</view>
			</view> -->
			<view class="comment">
				{{commment}}
			</view>
			<view class="shop_wrap">
				<view class="shop-product" v-if="item.shop.length >= 4">
					<view class="goods" v-for="(val, index) in item.shop" :key="index" v-if="index < 9 && item.shop.length > 0" >
						<!-- <image :src="val.cover_img" mode="" @click="Togoodsinfo(item.shop,index)"></image> -->
							<image :src="val.cover_img" mode="widthFix" @click="Togoodsinfo(item.shop,index)"></image>
						<!-- <view class="pirce">￥{{val.goods_price}}</view> -->
						<!-- <view class="title">{{val.title}}</view> -->
					</view>
					<view class="nullgoods" v-if="item.shop.length === 0">
						<text>该店暂无商品...</text>
					</view>
				</view>
			</view>
			
			
			<view class="shop_wrap">
				<!-- <view class="shop-product" v-if="item.shop.length < 4" style="justify-content: flex-start;"> -->
					<view class="shop-product" v-if="item.shop.length < 4">
					<view class="goods" v-for="(val, index) in item.shop" :key="index" v-if="item.shop.length > 0"  style="margin-right: 10upx;">
							<image :src="val.cover_img" mode="widthFix" @click="Togoodsinfo(item.shop,index)"></image>
						<!-- <view class="pirce">￥{{val.goods_price}}</view> -->
						<!-- <view class="title">{{val.title}}</view> -->
					</view>
					<view class="nullgoods" v-if="item.shop.length === 0">
						<text>该店暂无商品...</text>
					</view>
				</view>
				<view class="shop-bottom">
					
					<uni-icons type="icon-kefu1" @click="customerService(item)" color="#ff4400" size="18"></uni-icons>
					<!-- <view class="contact" @click="customerService(item)">联系客服</view> -->
					<uni-icons type="icon-shoucang" class="collection"  color="#ff4400" @click="toFavorite(item.id)" size="18" ></uni-icons>
					<!-- <view class="into-shop" @click="navToDetailPage(item)">进入店铺</view> -->
				</view>
			</view>
		</view>	
		<view class="load">
			<text class="loading-text">
				{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
			</text>
		</view>
		
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import { getOne,postOne,msg } from '../../api/publicapi.js'
	import uniIcons from '../../ed-icons/ed-icons.vue'
	var _self, page = 1;
	export default {
		components: {
			uniIcons,
			uniSearchBar,       
			uniLoadMore
		},
		data() {
			return {
				shop: [],
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "暂时没有更多数据了..."
				},
				shop_phone:'',
				imgArr:[],
				commment:'暂无评论'
			}
				
		},
		async onLoad(options) {
			_self = this;
			page = 1
			this.shopstreet()
		},
		methods: {
			// 上拉加载
			onReachBottom: function() {
				if (_self.loadingType != 0) { //loadingType!=0;直接返回
					return false;
				}
				this.shopstreet()
			},
			shopstreet(){
				_self.loadingType = 1;
				uni.showNavigationBarLoading(); //显示加载动画
				let data = {
				  'page': page,
				}
				getOne('front/shopstreet', data).then(res => {
					
					if (res.data.data.length <= 0) { //没有数据
					
						_self.loadingType = 2;
						uni.hideNavigationBarLoading(); //关闭加载动画
						return false;
						
					} else {
						for (var i = 0; i < res.data.data.length; i++) {
							_self.shop.push(res.data.data[i]); //将数据拼接在一起
						}
						
						page++;
						_self.loadingType = 0; //将loadingType归0重置
					}
					
					uni.hideNavigationBarLoading(); //关闭加载动画
				})
			},
            //收藏
			toFavorite(id) {
				this.favorite = !this.favorite;
                let data={
                    id:id,
                    tag:'tenant'
                }         
                postOne('front/collection',data).then(res => {                 
                        msg(res.message)
                        
                })
			},
			
			// 店铺详情
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/myshop/myshop?id=${id}`
				})
			},

			// 商品详情
			Togoodsinfo(item,index){
				// console.log(item)
				let arry=item.slice(0,9)
				let imgIndex=index
				// console.log('this.shop',item)
				arry.map((val,index)=>{
					// console.log('val',val)
					this.imgArr[index]=val.cover_img
					
				})
				// let id = val.id
				// let cover_img=val.cover_img
				// let page=page
				// getOne(`front/shopstreet?page=${page}`).then(res=>{
				// 	console.log(res)
				// })
				// console.log(`第${index}张图片`)
				uni.previewImage({
					current:imgIndex,
					urls:this.imgArr,
					loop:true,
					longPressActions:{
						itemList:'保存图片',
						itemColor:'#FF0000'
					},
					indicator:"number"
				})
				// uni.navigateTo({
				// 	url: `/pages/product/product?id=${id}`
				// })
			},
			customerService(item){
				// console.log(item.shop_phone)
				let phone=item.shop_phone
				if(phone=='12345678901'){
					phone='18098160639'
					uni.showModal({
							title:'提示',
							content:phone,
							confirmText:'呼叫',
							confirmColor:'#FF0000',
							success:(res)=>{
								if(res.confirm){
									uni.makePhoneCall({
										phoneNumber:phone,
										success:function(){
											console.log(`拨打电话为:${phone}`)
										}
									})
								}else if(res.cancel){
									uni.navigateTo({
										url:'pages/shopstreet/shopstreet'
									})
								}
							}
						})
				}else{
					phone=item.shop_phone
					uni.showModal({
							title:'提示',
							content:phone,
							confirmText:'呼叫',
							confirmColor:'#ff0000',
							success:(res)=>{
								if(res.confirm){
									uni.makePhoneCall({
										phoneNumber:phone,
										success:function(){
											console.log(`拨打电话为:${phone}`)
										}
									})
								}else if(res.cancel){
									uni.navigateTo({
										url:'pages/shopstreet/shopstreet'
									})
								}
							}
						})
				}
			},
			search(e){
				let name=e.value
				// console.log(name)
				getOne(`front/shopstreet?name=${name}`).then(res=>{
					// console.log(res.data)
					this.shop=res.data.data
					if(this.shop.length===0){
						this.loadingType=2
					}
									
					// console.log('search',this.shop)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F4F4F4;
	}
	.shopstreet{
		width: 100%;
		margin-top: 30upx;
		padding-bottom: 10px;
		.shop{
			background-color: #FFF;
			width: 95%;
			margin: 0 auto;
			border-radius: 15upx;
			padding-bottom: 30upx;
			border: 1px solid #e2e2e2;
			margin-bottom: 20upx;
			.shop-head{
				padding-top: 20upx;
				display: flex;
				justify-content: space-between;
				.shop-name{
					image{
						margin-left: 20upx;
						border-radius: 50%;
						width: 90upx;
						height: 90upx;
					}
					.store{
						font-size: 28upx;
						margin-left: 15upx;
						float: right;
						margin-top: 10rpx;
						text{
							font-weight: 600;
						}
						view{
							color: #C0C4CC;
							font-size: 24upx;
						}
					}
				}
				// .collection{
				// 	margin: 20upx 30upx 0;
				// 	height: 50upx;
				// 	// border: 1px solid #d23931;
				// 	// color: #d23931;
				// 	border-radius: 30upx;
				// 	width: 100rpx;
				// 	// font-size: 30rpx;
				// 	text-align: center;
				// }
				.into_store{
					color:#ff4400;
					// display: inline-block;
					border: 1upx solid #ff4400;
					border-radius:100upx;
					margin-right: 40upx;
					width: 160upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					// padding: 0upx 30upx ;
					text{
						font-size: 16px;
					}

				}
			}
			// .score{
			// 	width: 95%;
			// 	margin: 10upx auto;
			// 	display: flex;
			// 	justify-content: space-between;
			// 	font-size: 26upx;
			// 	color: #606266;
			// 	text{
			// 		color: red;
			// 	}
			// }
			.comment{
				width: 95%;
				margin: 10upx auto;
				font-size: $font-sm;
			}
			.shop_wrap{
				margin-top:5upx ;
				padding: 0upx 20upx;	
				// border-buttom: 1px solid $border-color-dark;
				.shop-product{
					border-radius: 8upx;
					// border: 1px solid #000000;
					// background-color: #e4e4e4;
					width: 100%;
					margin: 10upx auto;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					
					.goods{
						width: 32%;		
							image{
								width: 100%;
								height: 160upx;
							}
						
					}
			}
				.pirce{
					position: relative;
					color: #FFF;
					width: 160rpx;
					height: 36rpx;
					background-color: #000;
					top: -44rpx;
					font-size: 26rpx;
					text-align: center;
					opacity: 0.5;
				}
				.title{
					width: 160upx;
					overflow: hidden; //超出隐藏
					white-space: nowrap; 
					text-overflow: ellipsis;
				}
			}
			.shop-bottom{
				// border: 1px solid #000000;
				color: #606266;
				// width: 90%;
				// font-size: 32upx;
				// margin: 10upx auto;
				// display: flex;
				// justify-content: space-between;
				border-top: 1px solid $border-color-dark;
				padding-top: 10upx;
				uni-icons{
					margin-right:50upx;
				}
			}
		}
	}
	.load {
		text-align: center;
		font-size: 30upx;
		height: 70upx;
		color: #595959;
	}
	.nullgoods{
		width: 100%;
		text-align: center;
		padding: 50upx;
		font-size: 33upx;
	}
</style>
